<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mui-player</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 引入基础样式文件 mui-player.min.css -->
    <link rel="stylesheet" type="text/css" href="mui-player/mui-player.min.css"/>
    <!-- 引入基础脚本 mui-player.min.js -->
    <script type="text/javascript" src="mui-player/mui-player.min.js"></script>
    <!-- 引入hls.js -->
    <script type="text/javascript" src="hls.js/hls.js"></script>
</head>
<body>

<div style="width: 400px;height: 300px;">
    <div id="mui-player"></div>
</div>

<script>
    // 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
    var mp = new MuiPlayer({
        container: '#mui-player',
        title: '标题',
        src: 'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8',
        parse: {
            type: 'hls',
            loader: Hls,
            config: { // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
                debug: false,
            },
        },
    })
</script>
</body>
</html>
